<template>
  <div>
    <!--工具栏-->
    <div class="toolbar">
      <el-form :inline="true" :model="filters" :size="size" ref="filters" label-width="120px" class="search">
        <!-- 搜索框部分 -->
        <el-row class="search-input">
          <el-row class="times">
            <el-form-item label="统计日期：" prop="startTime">
              <el-date-picker
                v-model="filters.startTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
                placeholder="开始时间"
                class="input_postion w211"
                clearable
                @change="changeStartDate"
                :picker-options="startDateDisabled"
              ></el-date-picker>
            </el-form-item>
            <span class="times-to">-</span>
            <el-form-item prop="endTime">
              <el-date-picker
                v-model="filters.endTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
                placeholder="结束时间"
                class="input_postion w211"
                clearable
                @change="changeEndDate"
                :picker-options="endDateDisabled"
              ></el-date-picker>
            </el-form-item>
          </el-row>
        </el-row>
        <!--tab切换-->
        <!--<div>
          <el-row class=" button mt20 noboder">
            <el-form-item>
              <el-tabs v-model="activeName"  type="card"  @tab-click="handTabChange">
                <el-tab-pane label="全部" name="1"></el-tab-pane>
                <el-tab-pane label="企业微信" name="4"></el-tab-pane>
                <el-tab-pane label="微信银行公众号" name="5"></el-tab-pane>
                <el-tab-pane label="we2000公众号" name="6"></el-tab-pane>
                <el-tab-pane label="we2000小程序" name="7"></el-tab-pane>
                <el-tab-pane label="微众App" name="2"></el-tab-pane>
                <el-tab-pane label="微信银行小程序" name="3"></el-tab-pane>
                <el-tab-pane label="企业" name="10"></el-tab-pane>
                <el-tab-pane label="卡劵平台" name="11"></el-tab-pane>
                <el-tab-pane label="其他" name="12"></el-tab-pane>
              </el-tabs>
            </el-form-item>
          </el-row>
        </div>-->
      </el-form>
      <!-- 查询 重置部分 -->
      <el-row class="search-button">
        <el-col class="mb20">
          <kt-button icon="fa fa-se arch" :label="$t('action.search')" type="primary" @click="findPage()"/>
          <kt-button icon="fa fa-refresh" :label="$t('action.reset')" type="primary" @click="resetForm()"/>
          <!--            <el-button type="primary" size="small" @click="addForm()">新增</el-button>-->
        </el-col>
      </el-row>
      <div class="tab-container">
        <el-tabs v-model="activeName">
          <el-tab-pane
            v-for="item in tabMapOptions"
            :key="item.key"
            :label="item.label"
            :name="item.key"
          >
            <keep-alive>
              <tab-pane
                v-if="activeName==item.key"
                :type="item.key"
                ref="child"
                :parentFilters="filters"
              />
            </keep-alive>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <!--订单异常列表-->
    <el-table :data="pageResult"
              style="width: 100%"
              :stripe="true"
              :header-cell-style="{ 'color': '#FFF','background-color': '#2F4554'}"
              :size="size"
              align="align">
      <el-table-column prop="createTime" label="日期" sortable width="200"></el-table-column>
      <el-table-column prop="channelCode" label="渠道编码" sortable width="200"></el-table-column>
      <el-table-column prop="channelName" label="渠道名称" sortable width="200"></el-table-column>
      <el-table-column prop="pv" label="访问次数(pv)" sortable width="200"></el-table-column>
      <el-table-column prop="uv" label="访问用户数(uv)" sortable width="200"></el-table-column>
      <el-table-column prop="visitedNewUsers" label="访问新用户数" sortable width="200"></el-table-column>
      <el-table-column prop="registeredUsers" label="累计注册用户数" sortable width="200"></el-table-column>
      <el-table-column prop="registeredUsers" label="访问注册用户数" sortable width="200"></el-table-column>
      <el-table-column prop="registeredUsers" label="注册用户数" sortable width="200"></el-table-column>
      <el-table-column prop="registeredNewUsers" label="注册新用户数" sortable width="200"></el-table-column>
      <el-table-column prop="firstPaymentUsers" label="首次支付成功用户数" sortable width="200"></el-table-column>
      <el-table-column prop="submittedOrders" label="提交订单用户数" sortable width="200"></el-table-column>
      <el-table-column prop="submittedOrdersRate" label="下单用户比例" sortable width="200"></el-table-column>
    </el-table>
    <!--分页栏-->
    <div class="toolbar" style="padding:10px;">
      <el-pagination layout="total, prev, pager, next, jumper,sizes"
                     @current-change="refreshPageRequest"
                     @size-change="handleSizeChange"
                     :current-page="pageRequest.pageNum"
                     :page-size="pageRequest.pageSize"
                     :total="totalSize"
                     style="float:right;"
                     :page-sizes="[10, 20, 30, 40]"></el-pagination>
    </div>
  </div>
</template>

<script>
  import KtButton from '@/views/Core/KtButton'
  import citys from '../../../../static/json/Paje/citys'


  export default {
    name: 'abnormalEvent',
    components: {
      KtButton,
    },
    data() {
      return {
        activeName:'1',
        size: 'small',
        options: citys,
        editDialogVisible: false,
        dialogVisible:false,
        logDialogVisible:false,
        filters: {
          createTime:"",
        },
        tabMapOptions: [
          { label: "全部", key: "1" },
          { label: "企业微信", key: "4" },
          { label: "微信银行公众号", key: "5" },
          { label: "we2000公众号", key: "6" },
          { label: "we2000小程序", key: "7" },
          { label: "微众App", key: "2" },
          { label: "微信银行小程序", key: "3" },
          { label: "企业", key: "10" },
          { label: "卡劵平台", key: "11" },
          { label: "其他", key: "12" }
        ],
        pageResult: [],
        totalSize: 0,
        pageRequest: {pageNum: 1, pageSize: 10},
        // dataForm: {ids: [], remark: '', remarkStatus: 0},
      }
    },
    mounted() {
      this.findPage()
    },
    methods: {
      handTabChange(tab, event) {
        let param = tab.name;
        if (param == 1) {
          this.filters.canSale = "";
          this.filters.status = "";
          this.findPage();
        } else if (param == 2) {
          this.filters.canSale = 1;
          this.filters.status = "";
          this.findPage();
        } else if (param == 3) {
          this.filters.canSale = 0;
          this.filters.status = "";
          this.findPage();
        } else if (param == 4) {
          this.filters.canSale = "";
          this.filters.status = "0";
          this.findPage();
        } else if (param == 5) {
          this.filters.canSale = "";
          this.filters.status = "1";
          this.findPage();
        } else if (param == 6) {
          this.filters.canSale = "";
          this.filters.status = "2";
          this.findPage();
        } else if (param == 7) {
          this.filters.canSale = "";
          this.filters.status = "3";
          this.findPage();
        }
      },
      changeStartDate: function() {
        var this_ = this;
        this_.endDateDisabled = {
          disabledDate: time => {
            if (this_.filters.startTime) {
              return time.getTime() <= new Date(this_.filters.startTime).getTime();
            }
          }
        };
      },
      changeEndDate: function() {
        var this_ = this;
        this_.startDateDisabled = {
          disabledDate: time => {
            if (this_.filters.endTime) {
              return time.getTime() >= new Date(this_.filters.endTime).getTime();
            }
          }
        };
      },
      findPage() {
        let this_ = this;
        this_.filters.start = this_.pageRequest.pageNum;
        this_.filters.limit = this_.pageRequest.pageSize;
        this.utils.request.findDFlowReportPage(this_.filters, function(res) {
          if(res.code == '0000'){
            this_.pageResult = res.data.list;
            this_.totalSize = res.data.total;
          } else {
            this_.pageResult = [];
            this_.totalSize = 0;
          }
        })
      },
      // 每页数据刷新
      refreshPageRequest: function(pageNum) {
        this.pageRequest.pageNum = pageNum;
        this.findPage();
      },
      // 每页条数刷新
      handleSizeChange: function(pageSize) {
        this.pageRequest.pageSize = pageSize;
        this.findPage();
      },
      // 清空
      resetForm() {
        let this_=this;
        this_.filters = {};
        this_.receiverAddress = [];
        this_.orderCreateTime = [];
        this_.createTime = [];
        this_.findPage();
      }
    }
  };
</script>

<style scoped lang='scss'>
  /* 搜索样式重置 */
  .search /deep/ .el-form-item__content {
    width: 160px;
  }

  .search /deep/ .el-select {
    width: 160px !important;
  }

  .search /deep/ .el-date-editor.el-input__inner {
    width: 220px !important;
  }

  .search .manager /deep/ .el-form-item {
    width: 70px !important;
  }

  .clearfix {
    text-align: left;
  }

  .box-card {
    margin-bottom: 20px;
  }

  .jiesuan {
    margin-left: 10px;
  }

  .el-tabs {
    margin-bottom: 20px;
  }

  .orderDetail {
    margin: 20px;
    font-size: 14px;
  }

  .el-col {
    border-radius: 4px;
    color: #58666e !important;
  }

  .bg-purple {
    text-align: left;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
  }

  .mb20{
    margin-bottom: 20px;
  }
</style>
